<template>
  <!-- <div class="anticon" :class="getAppLogoClass" @click="goHome"> -->
  <div class="anticon"  @click="goHome">
    <i class="icon" :style="{ 'background-image': `url(${iconUrl})` }" />
    <div class="ml-2 truncate md:opacity-100" :class="getTitleClass" v-show="showTitle">
      {{ title }}
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed, unref } from 'vue';
  import { useGlobSetting } from '@/hooks/settings';
  import { useGo } from '@/hooks/web/usePage';
  // import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
  import { useDesign } from '@/hooks/web/useDesign';
  import { PageEnum } from '@/enums/pageEnum';
  import { useUserStore } from '@/store/modules/user';
  const props = defineProps({
    /**
     * The theme of the current parent component
     */
    theme: { type: String, validator: (v: string) => ['light', 'dark'].includes(v) },
    /**
     * Whether to show title
     */
    showTitle: { type: Boolean, default: true },
    /**
     * The title is also displayed when the menu is collapsed
     */
    alwaysShowTitle: { type: Boolean },

    name: {
      type: String,
      required: true,
    },
  });

  const iconUrl = computed(() => {
    return new URL(`/src/assets/icons/${props.name}.png`, import.meta.url).href;
  });

  const { prefixCls } = useDesign('app-logo');
  // const { getCollapsedShowTitle } = useMenuSetting();
  const userStore = useUserStore();
  const { title } = useGlobSetting();
  const go = useGo();

  // const getAppLogoClass = computed(() => [
  //   prefixCls,
  //   props.theme,
  //   { 'collapsed-show-title': unref(getCollapsedShowTitle) },
  // ]);

  const getTitleClass = computed(() => [
    `${prefixCls}__title`,
    {
      'xs:opacity-0': !props.alwaysShowTitle,
    },
  ]);

  function goHome() {
    // go(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
  }
</script>
